import { BrowserRouter as Router, Routes, Route, useLocation } from 'react-router-dom'
import Home from './pages/Home'
import Video from './pages/Video'
import PatientCircle from './pages/PatientCircle'
import SickCircleDetail from './pages/PatientCircle/Detail'
import PatientCirclePost from './pages/PatientCircle/Post'
import PatientCircleSearch from './pages/PatientCircle/Search'
import PatientCircleUserInfo from './pages/PatientCircle/UserInfo'
import Login from './pages/Login'
import TabBar from './components/TabBar'
import './App.css'

// 创建布局组件
const Layout = () => {
  const location = useLocation()
  
  // 定义需要显示TabBar的路径
  const showTabBarPaths = ['/', '/patient-circle', '/video', '/knowledge-base']
  const shouldShowTabBar = showTabBarPaths.includes(location.pathname)

  return (
    <div className="app-container">
      <div className="page-content">
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/video" element={<Video />} />
          <Route path="/patient-circle" element={<PatientCircle />} />
          <Route path="/patient-circle/detail/:id" element={<SickCircleDetail />} />
          <Route path="/patient-circle/post" element={<PatientCirclePost />} />
          <Route path="/patient-circle/search" element={<PatientCircleSearch />} />
          <Route path="/patient-circle/user/:id" element={<PatientCircleUserInfo />} />
          <Route path="/login" element={<Login />} />
        </Routes>
      </div>
      {shouldShowTabBar && <TabBar />}
    </div>
  )
}

function App() {
  return (
    <Router>
      <Layout />
    </Router>
  )
}

export default App